<h2>Basic Use Case</h2>

<md-sidenav-layout class="demo-sidenav-layout">
  <md-sidenav #start (open)="myinput.focus()" mode="side">
    Start Side Drawer
    <br>
    <button md-button (click)="start.close()">Close</button>
    <br>
    <button md-button (click)="end.open()">Open End Side</button>
    <br>
    <button md-button
            (click)="start.mode = (start.mode == 'push' ? 'over' : (start.mode == 'over' ? 'side' : 'push'))">Toggle Mode</button>
    <div>Mode: {{start.mode}}</div>
    <br>
    <input #myinput>
  </md-sidenav>

  <md-sidenav #end align="end">
    End Side Drawer
    <br>
    <button md-button (click)="end.close()">Close</button>
  </md-sidenav>

  <div class="demo-sidenav-content">
    <h1>My Content</h1>

    <div>
      <header>Sidenav</header>
      <button md-button (click)="start.toggle()">Toggle Start Side Drawer</button>
      <button md-button (click)="end.toggle()">Toggle End Side Drawer</button>
    </div>

    <button md-button>HELLO</button>
    <button md-raised-button class="md-primary">HELLO</button>
    <button md-fab class="md-accent">HI</button>
  </div>
</md-sidenav-layout>

<h2>Sidenav Already Opened</h2>

<md-sidenav-layout class="demo-sidenav-layout">
  <md-sidenav #start2 opened mode="side">
    Drawer
  </md-sidenav>

  <div class="demo-sidenav-content">
    <button md-button (click)="start2.toggle()">Toggle Start Side Drawer</button>
  </div>
</md-sidenav-layout>

<h2>Dynamic Alignment Sidenav</h2>

<md-sidenav-layout class="demo-sidenav-layout">
  <md-sidenav #dynamicAlignSidenav mode="push" [align]="side">Drawer</md-sidenav>

  <div class="demo-sidenav-content">
    <button (click)="dynamicAlignSidenav.toggle()">Toggle sidenav</button>
    <button (click)="side = (side == 'start') ? 'end' : 'start'">Change sides</button>
  </div>
</md-sidenav-layout>